<template>
	<view>
		<!-- <uni-nav-bar left-icon="back" @clickLeft="goback" @clickRight="gosubmit" left-text="" right-text="提交" title="配件申请"></uni-nav-bar> -->
		<view class="borBoxs">
			
			<picker @change="changes($event,'inventoryId')"  :range="inventoryList" range-key="itemName" class="fontsz">
				<view class="inputName">
					<view :class="inventoryId == 'dd' && 'colorD1'">{{inventoryId == 'dd' ?  '选择配件名称' : inventoryList[inventoryId].itemName}}</view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</picker>
		</view>
		
		<view class="borBoxs">
			<picker @change="changes($event,'sizeId')" v-if="inventoryId != 'dd' && sizeList.length > 0"  :range="sizeList" range-key="sizeTitle" class="fontsz">
				<view class="inputName">
					<view :class="sizeId == 'dd' && 'colorD1'">{{sizeId == 'dd' ?  '选择规格' : sizeList[sizeId].sizeTitle }}</view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</picker>
			<view class="inputName" v-else @click="inventoryId == 'dd' ? tip('选择配件名称') : tip('此名称暂无规格')">
				<view class="colorD1">选择规格</view>
				<uni-icons type="arrowright"></uni-icons>
			</view>
		</view>
		
		<view class="borBoxs">
			<picker @change="changes($event,'priceId')" v-if="sizeId != 'dd' && priceList.length > 0"  :range="priceList" range-key="priceInfo" class="fontsz">
				<view class="inputName">
					<view :class="priceId == 'dd' && 'colorD1'">{{priceId == 'dd' ?  '选择规格值' : priceList[priceId].priceInfo }}</view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</picker>
			<view class="inputName" v-else @click="sizeId == 'dd' ? tip('请选择规格') : tip('暂无规格值')">
				<view class="colorD1">选择规格值</view>
				<uni-icons type="arrowright"></uni-icons>
			</view>
		</view>
		
		<view class="borBoxs">
			<view class="inputName" :class="priceId == 'dd' && 'colorD1'">
				{{priceId == 'dd' ? '总数量' : priceList[priceId].specificationNum}}
				<!-- <input type="text" :value="" placeholder="总数量"  :disabled="true" placeholder-class="colorD1" /> -->
			</view>
		</view>
	
		<!-- 名称 -->
		<view class="borBoxs">
			<view class="inputName ">
				<input type="text" v-model="getUserInfo.userName" placeholder="" :disabled="true"  placeholder-class="colorD1" />
			</view>
		</view>
		
		<!-- 日期 -->
		<view class="borBoxs">
			<picker mode="date" @change="changes($event,'receiveDate')" :start="startDate" class="fontsz">
				<view class="inputName">
					<view class="dd">{{receiveDate}}</view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</picker>
		</view>

		<!--  -->
		<view class="borBoxs">
			<view class="inputName">
				<input type="number" v-model="receiveNum" placeholder="输入领用数量"  placeholder-class="colorD1" />
			</view>
		</view>
		<view class="borBoxs">
			<view class="inputName">
				<input type="text"  v-model="projectName" placeholder="输入项目名称"  placeholder-class="colorD1" />
			</view>
		</view>
		<view class="borBoxs textRTip">
			<textarea placeholder="备注:" v-model="remark"  maxlength="100"  placeholder-class="colorD1" class="textarea" ></textarea>
		</view>

		<button type="default" @click="submitMaintains">提交</button>
	</view>
</template>

<script>
	import {
		formatTime
	} from "../../../static/js/dateUtil.js"
	
	import {
		mapGetters
	} from "vuex"
	import fault from "../../../serve/api/fault.js"
	
	export default {
		data() {
			return {
				inventoryList:[],//库存
				inventoryId:"dd",//库存下标
				sizeList:[],
				sizeId:"dd",//规格下标
				priceList:[],//规格值
				priceId:"dd",//规格值下标
				receiveDate: "",//领取时间
				receiveNum:"",//领用数量
				projectName:"",//项目名称
				remark:"",//备注
				types:"",
			}
		},
		computed: {
			startDate() {
				this.receiveDate = formatTime(new Date())
				return formatTime(new Date())
			},
			...mapGetters([
				'getUserInfo',
			])
		},
		onLoad(e){
			this.types = e.types
			this.getInvenTory()
		},
		methods: {
			async getInvenTory(){
				const res = await fault.selectInventoryInfoList({});
				this.inventoryList = res.data.data
				// inventoryId
			},
			// 规格
			async getsize(){
				let parme = {
					inventoryId:this.inventoryList[this.inventoryId].inventoryId
				}
				const res = await fault.selectInventorySizeList(parme)
				if(res){
					this.sizeList = res.data.data
				}
			},
			// 规格值
			async getprice(){
				let parme = {
					inventoryId:this.inventoryList[this.inventoryId].inventoryId,
					sizeId:this.sizeList[this.sizeId].sizeId
				}
				const res = await fault.selectInventorySizePriceList(parme)
				if(res){
					
					this.priceList = res.data.data
				}
			},
			
			changes({detail}, key) {
				this[key] = detail.value
				if(key == 'inventoryId'){
					this.getsize()
					this.sizeId = 'dd';
					this.priceId = 'dd';
					
				}else if(key == 'sizeId'){
					this.getprice();
					this.priceId = 'dd';
				}
			},
			// 导航右边事件
			async submitMaintains(e) {
				if(this.inventoryId == 'dd'){
					this.tip("请选择配件名称")
					return
				}else if(this.sizeId == 'dd'){
					this.tip("请选择规格")
					return
				}else if(this.priceId == 'dd'){
					this.tip("请选择选择规格值")
					return
				}else if(!this.receiveNum){
					this.tip("请输入领用数量")
					return
				}else if(!this.projectName){
					this.tip("请输入项目名称")
					return
				}else if(!this.remark){
					this.tip("请输入备注")
					return
				}
				let parme = {
					inventoryId:this.inventoryList[this.inventoryId].inventoryId,
					sizeId:this.sizeList[this.sizeId].sizeId,
					priceId:this.priceList[this.priceId].priceId,
					receiveDate:this.receiveDate,
					receiveNum:this.receiveNum,
					projectName:this.projectName,
					remark:this.remark,
				}
				const res = await fault.savePartApplication(parme)
				if(res){
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2];
					//#ifdef APP-PLUS
						prevPage.$vm.getList(this.types,true)
						prevPage.$vm.getHeadNav()
					// #endif
					//#ifdef H5
						prevPage.getList(this.types,true)
						prevPage.getHeadNav()
					// #endif
					uni.navigateBack({})
				}
			},
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	page {
		width: 750rpx;
		background: #EFF2F5;
		overflow: hidden;
	}
/* 
	view {
		font-size: 28rpx;
		line-height: 1.8;

	}
 */
	.borBoxs{
		width: calc(100vw - 100rpx);
		height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0px 10px 10px 0px rgba(52, 54, 61, 0.05);
		border-radius: 16rpx;
		margin: 20rpx auto 0;
		padding: 0 20rpx;
	}

	.inputName {
		display: flex;
		justify-content: space-between;
		height: 96rpx;
		font-size: 28rpx;
		align-items: center;

	}

	.inputName input {
		width: 630rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		/* color: #ADB5C5; */
	}

	.claimingData {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}


	button {
		width: 670rpx;
		height: 52px;
		background: #017EFE;
		box-shadow: 0px 5px 7px 0px rgba(1, 126, 254, 0.2);
		border-radius: 26px;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 52px;
		margin: 50px auto 34px;
	}
	.textRTip{
		padding: 20rpx;
		height: 200rpx;
	}
	.textarea{
		font-size: 28rpx;
		width: 100%;
	}
	.colorD1{
		color: #ADB5C5;
	}
</style>
